<template>
  <div class="page-container" v-loading="loading" v-loadingCommonStyle>
    <ex_header_spiler :title="$tt('label_tms_waybill_order_info')" />
    <div class="describe">
      <div style="display: flex;justify-content: space-between"><span>{{$t('tip_tenant_order_detail_formula')}}</span><span>{{ $t('tip_tenant_order_detail_formula6') }}</span></div>
      <div>{{$t('tip_tenant_order_detail_formula5')}}</div>
    </div>
    <ex_super_table style="margin-top: 10px;" v-bind="containerDetailsOption" :data="detailList"
      ref="containerDetailsRef" />
    <div class="describe">
      <div>{{$t('label_total_warehouse_cost')}}：{{amount}} {{currencyType}}</div>
      <div>{{$t('tip_tenant_order_detail_formula3')}}</div>
      <div>{{ $t('tip_tenant_order_detail_formula4') }}</div>
    </div>

    <feeDetails ref="feeDetailsDialog" />
  </div>
</template>
<script>
import router_params from '@/mixin/router_params';
import feeDetails from './dialog/feeDetails.vue';
export default {
  title: "label_fms_customer_tenant_order_detail",
  mixins: [router_params],
  components: { feeDetails },
  data() {
    return {
      loading: false,
      amount:0,
      currencyType:"CNY",
      detailList: [],
      containerDetailsOption: {
        model: [
          { label: 'label_stock_age_range_day', 'show-overflow-tooltip': true,formatter: (r, c, v, i) => r.startDay+'-'+r.endDay },
          { key: 'customSkuSpecName', label: 'label_sku_classify', 'show-overflow-tooltip': true},
          { key: 'totalVolume', label: 'label_stock_total_volume',formatter: (r, c, v, i) => this.$addUnit(v, "m³"), 'show-overflow-tooltip': true, },
          { key: 'volume', label: 'label_fee_stock_total_volume',formatter: (r, c, v, i) => this.$addUnit(v, "m³"), 'show-overflow-tooltip': true, },
          { key: 'totalQty', label: 'label_total_sku_count', 'show-overflow-tooltip': true, },
          { key: 'qty', label: 'label_fee_total_sku_count','show-overflow-tooltip': true, },
          { key: 'priceUnit', label: 'label_unit_price', 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$formatNameCode(v, r.currencyType) },
          { key: 'minAmount', label: 'label_minimum', 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$formatNameCode(v, r.currencyType) },
          { key: 'additionalAmount', label: 'label_pms_host_add_price', 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$formatNameCode(v, r.currencyType) },
          { key: 'amount', label: 'label_total_warehouse_cost', 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$formatNameCode(v, r.currencyType) },
          {
            label: 'label_fee_details', type: "operate", operate: [
              {
                label: 'label_view',
                click: (row) => {
                  this.$refs.feeDetailsDialog.show(row)
                }
              }]
          },
        ],
      },
    };
  },

  methods: {
    init_data_default(into_params) {
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: '/fms-api/customer/CustomerOrderRpc/queryWarehouseTenantCosts.json',
          method: 'post',
          data: { fmsOrderId: into_params.id },
          success: (res) => {
            this.loading = false
            this.detailList = res.data.rows
            this.amount = 0
            res.data.rows.forEach(item=>{
              this.currencyType = item.currencyType
              this.amount+=item.amount
            })

          }
        })
      }

      this.$emit("tagModifyLabel", {
        _key: 'label_name_code',
        name: this.$t("label_fms_customer_tenant_order_detail"),
        code: into_params.id
      })
    }

  }
};

</script>
<style lang="less" scoped>
.describe {
  color: #666;
  margin-top: 10px;
}
</style>
